<template>
  <div ref="map" />
</template>
<script>
import 'echarts/map/js/china.js' // 引入中国地图数据
import 'echarts/map/js/province/henan.js'
/*因为echarts 只内置了世界、中国、中国省的地图文件，如果你要使用市级的地图要去找相关的json或者js文件然后在渲染*/
export default {
  name: 'qianxi',
  props: {
    select: {//用来判断是加载哪个地图，China，还是world，还是广东
      type: String
    },
    datas: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      //下面是经纬度，用哪个地方的就填哪个地方的就可以
      geoCoordMap: {
        '黑龙江': [127.9688, 45.368],
        '内蒙古': [110.3467, 41.4899],
        '吉林': [125.8154, 44.2584],
        '辽宁': [123.1238, 42.1216],
        '河北': [114.4995, 38.1006],
        '天津': [117.4219, 39.4189],
        '山西': [112.3352, 37.9413],
        '陕西': [109.1162, 34.2004],
        '甘肃': [103.5901, 36.3043],
        '宁夏': [106.3586, 38.1775],
        '青海': [101.4038, 36.8207],
        '新疆': [87.9236, 43.5883],
        '西藏': [91.11, 29.97],
        '北京': [116.4551, 40.2539],
        '四川': [103.9526, 30.7617],
        '重庆': [108.384366, 30.439702],
        '山东': [117.1582, 36.8701],
        '河南': [113.4668, 34.6234],
        '江苏': [118.8062, 31.9208],
        '安徽': [117.29, 32.0581],
        '湖北': [114.3896, 30.6628],
        '浙江': [119.5313, 29.8773],
        '福建': [119.4543, 25.9222],
        '江西': [116.0046, 28.6633],
        '湖南': [113.0823, 28.2568],
        '贵州': [106.6992, 26.7682],
        '云南': [102.9199, 25.4663],
        '广东': [113.12244, 23.009505],
        '广西': [108.479, 23.1152],
        '海南': [110.3893, 19.8516],
        '上海': [121.4648, 31.2891],

        '郑州': [113.65,34.76],
        '荥阳': [113.35,34.79],
        '开封': [114.35,34.79],
        '平顶山': [113.29,33.75],
        '洛阳': [112.44,34.7],
        '焦作': [113.21,35.24],
        '鹤壁': [114.17,35.9],
        '杞县': [114.77,34.56],
        '尉氏': [114.17,34.41],
        '新郑': [113.71,34.4],
        '登封': [113.02,34.46],
        '通许': [114.46,34.48],
        '中牟': [114,34.73],
        '密县': [113.35,34.51],
        '巩县': [112.96,34.76],
        '兰考': [114.81,34.69],
        '新乡': [113.85,35.31],
        '汲县': [114.05,35.44],
        '封丘': [114.04,35.03],
        '获嘉': [113.63,35.27],
        '温贺': [113.06,34.94],
        '济源': [112.57,35.08],
        '博爱': [113.05,35.16],
        '辉县': [113.77,35.46],
        '延津': [114.19,35.14],
        '原阳': [113.96,35.05],
        '武陟': [113.38,35.1],
        '孟县': [112.77,34.92],
        '沁阳': [112.92,35.08],
        '修武': [113.42,35.24],
        '安阳': [114.35,36.1],
        '南乐': [115.21,36.08],
        '范县': [115.46,35.9],
        '台前': [115.83,36],
        '滑县': [114.52,35.57],
        '浚县': [114.54,35.67],
        '淇县': [114.17,35.6],
        '内黄': [114.88,35.95],
        '清丰': [115.1,35.89],
        '濮阳': [114.98,35.71],
        '长垣': [114.67,35.19],
        '汤阴': [114.35,35.92],
        '林县': [113.81,36.06],
        '商丘': [115.65,34.44],
        '夏邑': [116.13,34.22],
        '柘城': [115.29,34.08],
        '睢县': [115.04,34.46],
        '虞城': [115.87,34.4],
        '永城': [116.37,33.94],
        '宁陵': [115.31,34.44],
        '民权': [115.13,34.65],
        '周口': [114.63,33.63],
        '商水': [114.59,33.54],
        '扶沟': [114.38,34.05],
        '鹿邑': [115.48,33.86],
        '淮阳': [114.88,33.74],
        '沈丘': [115.06,33.41],
        '西华': [114.5,33.79],
        '太康': [114.85,34.06],
        '郸城': [115.17,33.63],
        '项城': [114.9,33.44],
        '许昌': [113.81,34.02],
        '鄢县': [114.17,34.11],
        '郾城': [113.98,33.6],
        '襄城': [113.46,33.86],
        '鲁山': [112.88,33.74],
        '郏县': [113.19,33.98],
        '漯河': [114.02,33.56],
        '长葛': [113.77,34.22],
        '临颖': [113.94,33.81],
        '舞阳': [113.58,33.44],
        '叶县': [113.35,33.62],
        '宝丰': [113.04,33.86],
        '禹县': [113.47,34.16],
        '驻马店': [114.02,32.98],
        '确山': [114.02,32.83],
        '西平': [114,33.38],
        '汝南': [114.35,33],
        '新蔡': [114.97,32.75],
        '泌阳': [113.31,32.72],
        '遂平': [113.98,33.15],
        '上蔡': [114.26,33.25],
        '平舆': [114.62,32.97],
        '正阳': [114.38,32.62],
        '信阳': [114.08,32.13],
        '息县': [114.72,32.35],
        '固始': [115.68,32.17],
        '潢川': [115.04,32.13],
        '新县': [114.83,31.62],
        '罗山': [114.53,32.21],
        '淮滨': [115.41,32.44],
        '商城': [115.42,31.81],
        '光山': [114.91,32.02],
        '南阳': [112.53,33.01],
        '方城': [112.98,33.25],
        '唐河': [112.83,32.7],
        '新野': [112.36,32.51],
        '邓县': [112.08,32.68],
        '淅川': [111.47,33.14],
        '南召': [112.4,33.49],
        '社旗': [112.92,33.05],
        '桐柏': [113.4,32.37],
        '镇平': [112.23,33.03],
        '内乡': [111.83,33.05],
        '西峡': [111.5,33.31],
        '三门峡': [111.19,34.76],
        '孟津': [112.42,34.84],
        '临汝': [112.83,34.17],
        '汝阳': [112.46,34.16],
        '嵩县': [112.07,34.14],
        '栾川': [111.6,33.81],
        '灵宝': [110.85,34.52],
        '渑池': [111.75,34.76],
        '义马': [111.92,34.73],
        '偃师': [112.77,34.73],
        '伊川': [112.42,34.43],
        '宜阳': [112.15,34.51],
        '洛宁': [111.65,34.39],
        '卢氏': [111.03,34.06],
        '陕县': [111.19,34.76],
        '新安': [112.14,34.75],
        '汝州市': [112.81,34.16],



      }
      // Datas: [
      //   [{ name: '黑龙江', value: 0 }, { name: '广东' }],
      //   [{ name: '内蒙古', value: 10 }, { name: '广东' }],
      //   [{ name: '吉林', value: 10 }, { name: '广东' }],
      //   [{ name: '辽宁', value: 10 }, { name: '广东' }],
      //   [{ name: '河北', value: 10 }, { name: '广东' }]]
    }
  },
  watch: {
    datas (n, o) { // 不要使用箭头函数  不然会发生this改变
      this.mapEchartsInit()
    }
  },
  mounted () {
    this.mapEchartsInit()
  },
  methods: {
    mapEchartsInit () {
      const self = this
      const convertData = function (data) {
        const res = []
        for (let i = 0; i < data.length; i++) {
          const dataItem = data[i]
          const fromCoord = self.geoCoordMap[dataItem[0].name] // 迁出点
          const toCoord = self.geoCoordMap[dataItem[1].name] // 迁入点
          if (fromCoord && toCoord) {
            res.push([{
              coord: fromCoord,
              value: dataItem[0].value
            }, {
              coord: toCoord
            }])
          }
        }
        return res
      }
      const series = [];
      // 迁入地特殊显示
      [[`${self.datas[0][1].name}`, self.datas]].forEach(function (item, i) {
        series.push({
              type: 'lines',
              zlevel: 2,

              effect: {
                show: true,
                period: 4, // 箭头指向速度，值越小速度越快
                trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重
                symbol: 'arrow', // 箭头图标
                symbolSize: 5 // 图标大小
              },
              lineStyle: {
                normal: {
                  width: 0.2, // 尾迹线条宽度
                  opacity: 1, // 尾迹线条透明度
                  curveness: 0.3 // 尾迹线条曲直度
                }
              },
              data: convertData(item[1])
            }, {
              type: 'effectScatter',
              coordinateSystem: 'geo',
              zlevel: 2,
              rippleEffect: { // 涟漪特效
                period: 4, // 动画时间，值越小速度越快
                brushType: 'stroke', // 波纹绘制方式 stroke, fill
                scale: 3 // 波纹圆环最大限制，值越大波纹越大
              },
              label: {
                normal: {
                  show: true,
                  position: 'right', // 显示位置
                  offset: [5, 0], // 偏移设置
                  formatter (params) { // 圆环显示文字
                    return params.data.name
                  },
                  fontSize: 13
                },
                emphasis: {
                  show: true
                }
              },
              symbol: 'circle',
              symbolSize (val) {
                return 10 + val[2] / 5e3 // 圆环大小
              },
              itemStyle: {
                normal: {
                  show: false,
                  color: '#f00'
                }
              },
              data: item[1].map(function (dataItem) {
                return {
                  name: dataItem[0].name,
                  value: self.geoCoordMap[dataItem[0].name].concat([dataItem[0].value])
                }
              })
            },
            // 迁入点
            {
              type: 'scatter',
              coordinateSystem: 'geo',
              zlevel: 2,
              rippleEffect: {
                period: 4,
                brushType: 'stroke',
                scale: 4
              },
              label: {
                normal: {
                  show: true,
                  position: 'right',
                  offset: [5, 0],
                  color: '#0f0',
                  formatter: '{b}',
                  textStyle: {
                    color: '#0f0'
                  }
                },
                emphasis: {
                  show: true,
                  color: '#f60'
                }
              },
              symbol: 'pin',
              symbolSize: 20,
              data: [{
                name: item[0],
                value: self.geoCoordMap[item[0]].concat([10])
              }]
            }
        )
      })
      const option = {
        tooltip: {
          trigger: 'item',
          formatter (params, ticket, callback) {
            // 根据业务自己拓展要显示的内容
            let res = ''
            const name = params.name
            const value = params.value[params.seriesIndex + 1]
            if (value !== undefined) {
              res = "<span style='color:#fff;'>" + name + '</span><br/>迁徙人数：' + value
              return res
            }
          }
        },
        backgroundColor: 'rgba(166, 200, 76, 0)',
        visualMap: { // 图例值控制
          min: 0,
          max: 1,
          calculable: true,
          show: false,
          color: ['#4169E1', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
          textStyle: {
            color: '#fff'
          }
        },
        geo: {
          map: `${self.select}`,
          zoom: 1.2,
          label: {
            emphasis: {
              show: false
            }
          },
          roam: true, // 是否允许缩放
          itemStyle: {
            normal: {
              borderColor: 'rgba(147, 235, 248, 1)',
              borderWidth: 1,
              areaColor: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
              },
              shadowColor: 'rgba(128, 217, 248, 1)',
              // shadowColor: 'rgba(255, 255, 255, 1)',
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10
            },
            emphasis: {
              areaColor: '#389BB7',
              borderWidth: 0
            }
          }
        },
        series
      }
      const myChart = this.$echarts.init(this.$refs.map)
      myChart.setOption(option, true)
      // console.log(option)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    }
  }
}
</script>
<style>
.map {
  min-height: 600px;
}
</style>